<template>
    <div>
        <div v-for="i in tripInfo" class="trip-box">
            <img :src="'http://static.kaytrip.com/'+i.thumbimg">
            <div class="left">
                <p>{{i.caption}}</p>
                <div>
                    <del>原价：€{{i.pricea}}</del>
                    <span>€{{i.niceprice}}</span><span>起</span>
                </div>
               <div class="bottom">
                   <div class="start">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                    </div>
                    <p>已有{{i.travelpeople}}人出游</p>
               </div>
            </div>
      
        </div> 
    </div>
</template>

<script>
    import {mapState} from "vuex";
export default {
    mounted:function(){
        this.$store.dispatch("requestTripInfo");
        
    },
    computed:{
        ...mapState([
            "tripInfo"
        ])
    }

}
</script>

<style lang='css' scoped>
    .trip-box{
        border-bottom: 1px solid  #f4f4f4;
        width: 100vw;
        display: flex;
        padding: 15px;
    }
    p{
        margin: 8px 0;
    }
    .trip-box p:nth-of-type(1){
        color: #000000;
        font-size: 16px;
        width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        
    }
    .bottom p:nth-of-type(1){
        font-size: 11px;
        color: #939393;
        margin: 0;
    }
    .bottom{
        padding-top: 4px;
    }
    img{
        width:150px;
        height: 110px;
        border-radius: 3px;
    }
    .left{
        margin-left: 10px;
    }
    del{
        font-size: 14px;
        color: #d0d0d0;
    }
    span{
        color: #f86f5f;
    }
    span:nth-of-type(2){
        font-size: 12px;
    }
    .trip-box p:nth-of-type(3){
        font-size: 12px;
    }
    .start{
        font-size: 12px;
        color: #f9d6b7
    }
    i:nth-last-of-type(1){
        color: #eae4e4;
    }

   
</style>